<template>
    <div class="slider-container">
        <div class="slider">
            <div class="slide banner1">
                <div class="left">
                    <div class="title">
                        <p class="titleP">本月平均业务办理时长<img src="../../../assets/toMonth.png" alt="" class="toMonth"></p>
                        <p class="allDay"><span class="peopleNum">{{ this.nowAvg }}</span>小时</p>
                    </div>
                    <div class="line"></div>
                    <div class="content">
                        <p><span class="time1">{{ this.lastAvg }}</span>小时&nbsp;&nbsp;&nbsp; 上月的平均业务时长</p>
                        <p v-if="this.nowAvg - this.lastAvg <= 0"><span class="time2">{{ Math.abs(this.nowAvg -
                            this.lastAvg) }}</span>小时&nbsp;&nbsp;&nbsp;
                            对比<span class="jianshao">减少</span></p>
                        <p v-if="this.nowAvg - this.lastAvg <= 0" class="xiaolv">工作效率提高了！<img
                                src="../../../assets/tigao.png" alt="" class="tigaoIMG"></p>
                        <p v-if="this.nowAvg - this.lastAvg > 0"><span class="time2">{{ Math.abs(this.nowAvg -
                            this.lastAvg) }}</span>小时&nbsp;&nbsp;&nbsp;
                            对比<span class="jianshao">增加</span></p>
                        <p v-if="this.nowAvg - this.lastAvg > 0" class="xiaolv">工作效率降低了！<img
                                src="../../../assets/jiangdi.png" alt="" class="tigaoIMG"></p>
                    </div>

                </div>
                <div class="right">
                    <div class="rightTitle">
                        <p class="rightTitleP">本月超时停留人员</p>
                        <img src="../../../assets/jiantou02.png" alt="" class="jiantou01">
                    </div>
                    <div class="rightBkList">
                        <div class="rightBk">
                            <div class="NO1">
                                <p>NO.1</p>
                            </div>
                            <div class="peopleImg" :style="{ backgroundImage: `url(${No1Path})` }"
                                @click="previewImage(No1Path)"></div>
                            <div class="peopleName">
                                <p>{{ this.NO1Area }}</p>
                            </div>
                            <div class="messageList">
                                <p>姓名: <span>{{ this.NO1Name }}</span></p>
                                <p>停留时长: <span class="time">{{ this.NO1Time }}</span>分钟</p>
                                <p class="area">停留原因: <span>等待办理业务</span></p>
                            </div>
                        </div>
                        <div class="rightBk">
                            <div class="NO2">
                                <p>NO.2</p>
                            </div>
                            <div class="peopleImg" :style="{ backgroundImage: `url(${No2Path})` }"
                                @click="previewImage(No2Path)"></div>
                            <div class="peopleName">
                                <p>{{ this.NO2Area }}</p>
                            </div>
                            <div class="messageList">
                                <p>姓名: <span>{{ this.NO2Name }}</span></p>
                                <p>停留时长: <span class="time">{{ this.NO2Time }}</span>分钟</p>
                                <p class="area">停留原因: <span>等待办理业务</span></p>
                            </div>
                        </div>
                        <div class="rightBk">
                            <div class="NO2">
                                <p>NO.3</p>
                            </div>
                            <div class="peopleImg" :style="{ backgroundImage: `url(${No3Path})` }"
                                @click="previewImage(No3Path)"></div>
                            <div class="peopleName">
                                <p>{{ this.NO3Area }}</p>
                            </div>
                            <div class="messageList">
                                <p>姓名: <span>{{ this.NO3Name }}</span></p>
                                <p>停留时长: <span class="time">{{ this.NO3Time }}</span>分钟</p>
                                <p class="area">停留原因: <span>等待办理业务</span></p>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div v-if="showPreview" class="preview-modal" @click="closePreview">
            <img :src="previewImageUrl" alt="预览图片" class="preview-image">
        </div>
    </div>
</template>

<script>

import { duration } from "@/api/warning";


export default {
    name: "transactionProcessingTime",  //本月平均业务办理时长
    components: {
    },
    props: {
        month: {
            type: String,
            // required: true,
        }
    },
    data() {
        return {
            showPreview: false,
            previewImageUrl: '',
            currentIndex: 0,
            nowAvg: 0,
            lastAvg: 0,

            NO1Name: '',
            NO1Time: 0,
            NO1Area: '',
            No1Path: '',

            NO2Name: '',
            NO2Time: 0,
            NO2Area: '',
            No2Path: '',

            NO3Name: '',
            NO3Time: 0,
            NO3Area: '',
            No3Path: '',
        };
    },
    watch: {
        month(val) {
            // console.log('month', val);
            this.nowMonth = val;
            this.getTime()
        }
    },
    mounted() {
        // this.getTime()
    },
    methods: {
        previewImage(path) {
            this.previewImageUrl = path
            this.showPreview = true;
            console.log('previewImagepath', this.showPreview);
        },
        closePreview() {
            this.showPreview = false;
        },
        //本月平均业务办理时长
        async getTime() {
            let query = {
                month: this.nowMonth
            }
            let res = await duration(query);
            if (res.code == 200) {
                console.log('本月平均业务办理时长', res.data);
                this.nowAvg = res.data.nowAvg
                this.lastAvg = res.data.lastAvg

                this.NO1Name = res.data.top3[0].userName
                this.NO1Time = res.data.top3[0].duration
                this.NO1Area = res.data.top3[0].zoneName
                this.No1Path = res.data.top3[0].path

                this.NO2Name = res.data.top3[1].userName
                this.NO2Time = res.data.top3[1].duration
                this.NO2Area = res.data.top3[1].zoneName
                this.No2Path = res.data.top3[1].path

                this.NO3Name = res.data.top3[2].userName
                this.NO3Time = res.data.top3[2].duration
                this.NO3Area = res.data.top3[2].zoneName
                this.No3Path = res.data.top3[2].path
            }
        },
    }
};
</script>


<style lang="scss" scoped>
* {
    padding: 0;
    margin: 0;
}

.slider-container {
    width: 100%;
    height: 100vh;
    overflow: hidden;
    position: relative;
}

.preview-modal {
    border: 1px solid red;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.8);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 99999;
}

.preview-image {
    max-width: 90%;
    max-height: 90%;
}

.slider {
    display: flex;
    flex-direction: column;
    width: 100%;
    height: 100%;
    transition: transform 0.5s ease-in-out;
}

.slide {
    min-width: 100%;
    height: 100%;
    object-fit: cover;
}

.banner1 {
    background-image: url(../../../assets/banner12.png);
    display: flex;
    align-items: center;
}

.left {
    // border: 1px solid red;
    width: 30%;
    height: 75%;
    margin-left: 100px;
    margin-top: 80px;

    .title {
        .titleP {
            color: white;
            font-size: 64px;
            // border: 1px solid white;
            text-align: left;
            padding-left: 60px;
            line-height: 100px;
            margin-top: 0px;

            .toMonth {
                margin-left: 10px;
                margin-bottom: 30px;
            }
        }

        .allDay {
            color: white;
            // opacity: 0.8;
            font-size: 42px;
            // border: 1px solid white;
            text-align: left;
            padding-left: 60px;
            margin-top: 30px;

            .peopleNum {
                color: #58f3fc;
                font-size: 72px;
                margin-right: 20px;
                margin-left: 10px;
                opacity: 1 !important;
            }
        }
    }

    .line {
        width: 110%;
        height: 2px;
        background-color: white;
        opacity: 0.3;
        margin-top: 70px;
        margin-bottom: 70px;
    }

    .content {
        width: 100%;
        // border: 1px solid red;
        display: flex;
        flex-direction: column;
        align-items: start;
        padding-left: 60px;

        p {
            font-size: 28px;
            color: white;
            // opacity: 0.8;
            margin-bottom: 60px;
        }

        .time1 {
            font-size: 64px;
            color: #c4423f;
        }

        .time2 {
            font-size: 64px;
            color: #589efa;
        }

        .jianshao {
            color: #76e7f9;
        }

        .xiaolv {
            // border: 1px solid red;
            display: flex;
            justify-content: center;
            align-items: center;
            margin-top: -50px;

            .tigaoIMG {
                // border: 1px solid yellow;
                margin-left: -80px;
            }
        }
    }
}

.right {
    // border: 1px solid red;
    width: 55%;
    height: 75%;
    margin-left: 100px;
    margin-top: 80px;

    .rightTitle {
        width: 100%;
        height: 20%;
        // border: 1px solid yellow;
        margin-top: -30px;
        z-index: 999;
        position: relative;
        /* 确保子元素的 z-index 生效 */

        .rightTitleP {
            font-size: 42px;
            text-align: center;
            color: #99aef9;
            font-weight: 300;
            letter-spacing: 20px;
            margin-bottom: 15px;
        }

    }

    .rightBkList {
        width: 100%;
        // border: 1px solid white;
        height: 87%;
        margin-top: -50px;
        display: flex;
        justify-content: space-between;

        .rightBk {
            width: 334px;
            height: 712px;
            background-image: url(../../../assets/biankuang02.png);
            // background-repeat: no-repeat;
            // background-size: cover;
            display: flex;
            align-items: center;
            flex-direction: column;


            .NO1 {
                width: 242px;
                height: 99px;
                background-image: url(../../../assets/NO1.png);
                margin-top: 40px;
                display: flex;
                justify-content: center;
                align-items: center;

                p {
                    font-size: 72px;
                    color: white;
                }
            }


            .NO2 {
                width: 242px;
                height: 99px;
                background-image: url(../../../assets/NO2.png);
                margin-top: 40px;
                display: flex;
                justify-content: center;
                align-items: center;

                p {
                    font-size: 72px;
                    color: white;
                }
            }

            .peopleImg {
                width: 242px;
                height: 242px;
                border: 1px solid white;
                margin-top: 30px;
                background-repeat: no-repeat;
                background-size: cover;
                background-position: 0 0;
            }

            .peopleName {
                margin-top: 20px;
                width: 134px;
                height: 55px;
                background-image: url(../../../assets/peopleName.png);
                display: flex;
                justify-content: center;
                align-items: center;

                p {
                    font-size: 26px;
                    color: white;
                    font-weight: 300;
                }
            }

            .messageList {
                width: 242px;
                height: 200px;
                // border: 1px solid red;
                margin-top: 20px;
                display: flex;
                flex-direction: column;
                align-items: start;

                p {
                    font-size: 26px;
                    color: white;
                    font-weight: 300;
                    margin-bottom: 24px;
                }

                .area {
                    // border: 1px solid red;
                    text-align: left;
                }

                .time {
                    font-size: 42px;
                    font-weight: 200;
                    color: white;
                    margin-right: 5px;
                }
            }
        }
    }
}



.bkList {
    margin-top: 40px;

    .biankuang {
        // border: 1px solid yellow;
        margin-left: 40px;
        margin-bottom: 15px;
        height: 150px;
        width: 470px;
        background-image: url(../../../assets/biankuang01.png);
        background-repeat: no-repeat;
        background-size: cover;
        display: flex;

        .bkLeft {
            height: 100%;
            width: 28%;
            // border: 1px solid red;
            display: flex;
            align-items: center;
            justify-content: center;

            p {
                color: white;
                font-size: 32px;
                text-align: center;
            }
        }

        .bkRight {
            height: 100%;
            width: 72%;
            // border: 1px solid red;
            padding-top: 30px;

            .bkRTopP {
                color: white;
                font-size: 32px;
                text-align: left;
                display: flex;
                align-items: center;
                font-weight: 300;

                .bkRIImg {
                    margin-left: 30px;
                }
            }

            .bkRBottomP {
                color: white;
                opacity: 0.7;
                font-size: 18px;
                text-align: left;
                display: flex;
                align-items: center;
                font-weight: 300;
                margin-top: 25px;

                .bkRBottomSpan {
                    color: #fae28e;
                }
            }

            .bkRSpan {
                color: #c5423e;
            }
        }
    }
}
</style>